<script setup>
  import { onMounted, ref } from 'vue'
  import { onLoad, onReachBottom } from '@dcloudio/uni-app'
  import { http } from '@/utils/http.js'
  import { parseTime } from '@/utils/index.js'

  //tab
  const activeIndex = ref(1)
  function chooseTab(name, title) {
    currentPage.value = 1
    noticeDetail.value = []
    dealList.value = []
    activeIndex.value = name
    if (activeIndex.value == 1) {
      getNoticeList()
    } else {
      getDealList()
    }
  }

  // 消息通知列表
  const noticeDetail = ref([])
  const currentPage = ref(1)
  async function getNoticeList() {
    const res = await http.request({
      url: '/api/user/myMessage',
      method: 'POST',
      data: {
        page: currentPage.value,
        limit: 10,
      },
    })
    noticeDetail.value = [...noticeDetail.value, ...res.data]
  }

  //交易记录列表
  const dealList = ref([])
  async function getDealList() {
    const res = await http.request({
      url: '/api//user/biddingMsg',
      method: 'POST',
      data: {
        page: currentPage.value,
        limit: 10,
      },
    })
    dealList.value = [...dealList.value, ...res.data]
  }

  function getMoreNotice() {
    ++currentPage.value
    getNoticeList()
  }

  function getMoreDetail() {
    ++currentPage.value
    getDealList()
  }

  onMounted(() => {
    noticeDetail.value = []
    currentPage.value = 1
    getNoticeList()
  })
</script>

<template>
  <view class="notice-content">
    <y-tabs v-model="activeIndex" sticky @change="chooseTab">
      <y-tab class="y-tab-virtual" :title="'开赏记录'" name="1">
        <scroll-view
          scroll-y="true"
          class="scroll-Y"
          style="height: 90vh"
          @scrolltolower="getMoreNotice"
        >
          <view style="padding: 1rpx; background-color: #eeecec">
            <!-- 内容区域 -->
            <view
              class="notice-list"
              v-for="(item, index) in noticeDetail"
              :key="'notice' + index"
            >
              <view class="desc">
                <view class="name">盲盒名字:</view>
                <view class="box-type">{{ item.name }}</view>
              </view>

              <view class="desc">
                <view class="name">箱子:</view>
                <view class="box-type">第{{ item.case_name }}箱</view>
              </view>

              <view class="desc">
                <view class="name">领取时间:</view>
                <view class="box-type">{{ parseTime(item.add_time) }}</view>
              </view>
              <view class="desc">
                <view class="name">该箱获得数量:</view>
                <view class="box-type">{{ item.goods_info.length }}件</view>
              </view>

              <!-- /分割线 -->
              <view class="item-border"></view>

              <view
                class="desc borderline"
                v-for="(goods, index) in item.goods_info"
                :key="'goods' + index"
              >
                <view
                  class=""
                  style="
                    margin-left: 15rpx;
                    font-size: 24rpx;
                    color: #7863ff;
                    flex-shrink: 0;
                  "
                >
                  【{{ goods.rule_name }}】
                </view>
                <image :src="goods.goods_img" class="itemimg"></image>
                <view class="box-type goodsname">{{ goods.goods_name }}</view>
              </view>
            </view>
          </view>
        </scroll-view>
      </y-tab>
      <y-tab class="y-tab-virtual" :title="'交易记录'" name="2">
        <scroll-view
          scroll-y="true"
          class="scroll-Y"
          style="height: 90vh"
          @scrolltolower="getMoreDetail"
        >
          <view class="" style="margin-top: 34rpx">
            <view class="deal-item" v-for="item in dealList" :key="item.id">{{
              item.title
            }}</view>
          </view>
        </scroll-view>
      </y-tab>
    </y-tabs>
  </view>
</template>

<style lang="scss" scoped>
  page {
    background-color: #f4f4f4;
  }
  .notice-content {
    height: 100vh;
    padding-top: 64rpx;
    box-sizing: border-box;
    background-color: #eeecec;
  }
  .notice-list {
    padding-bottom: 50rpx;
    border: 1rpx solid #eeeeee;
    margin: 30rpx auto;
    border-radius: 16rpx;
    width: 95vw;
    height: 100%;
    background-color: #fff;
    font-family: OPPOSans;
    font-weight: 500;
    font-size: 26rpx;
    color: #9b9b9d;
    display: flex;
    flex-direction: column;
  }
  .desc {
    display: flex;
    flex-direction: row;
    margin-top: 30rpx;
    align-items: center;
  }
  .name {
    margin-left: 30rpx;
    width: 170rpx;
  }
  .box-type {
    margin-left: 20rpx;
  }
  .item-border {
    margin-top: 40rpx;
    background-color: #eeecec;
    height: 10rpx;
  }
  .itemimg {
    width: 60rpx;
    height: 60rpx;
    border-radius: 8rpx;
    // margin-left: 30rpx;
  }
  .borderline {
    border-bottom: 1rpx solid #f5f5f5;
    padding-bottom: 30rpx;
    &:last-child {
      border-bottom: none;
      padding-bottom: 0;
    }
  }
  .goodsname {
    margin-left: 20rpx;
    width: 70vw;
    font-size: 28rpx;
    color: #3d3d3d;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .deal-item {
    // height: 118rpx;
    padding: 20rpx;
    margin: 0 30rpx;
    margin-bottom: 24rpx;
    border-radius: 8rpx;
    background-color: #fff;
    box-sizing: border-box;
    font-size: 24rpx;
    line-height: normal;
  }
  /* #ifdef MP-QQ || MP-BAIDU || MP-TOUTIAO || MP-LARK || MP-KUAISHOU */
  .y-tab-virtual {
    position: relative;
    flex-shrink: 0;
    width: 100%;
    height: 100%;
  }
  /* #endif */
  @keyframes scroll {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(calc(-426rpx)); /* 单个图片宽度 * 图片数量的一半 */
    }
  }
  ::v-deep .y-tabs {
    // padding-top: 30rpx;
    top: -30rpx;
    border-radius: 36rpx;
    // background-color: #fff;
  }
  ::v-deep .y-tabs__content {
    // height: 100vh;
    // overflow: auto !important;
  }
  ::v-deep .y-tab__pane {
    overflow: auto;
    // height: 100vh !important;
  }
  ::v-deep .y-tabs__wrap {
    background-color: #eeecec !important;
  }
  ::v-deep .y-tabs__scroll {
    width: 360rpx !important;
    height: 64rpx;
    left: 25%;
  }
  ::v-deep .y-tab {
    height: 64rpx !important;
    margin: 0 20rpx;
    color: #1a1a1a !important;
    font-weight: 500 !important;
    z-index: 9 !important;
  }
  ::v-deep .y-tabs__nav {
    border-radius: 32rpx;
    background-color: #fff;
  }
  ::v-deep .y-tabs__nav .is-active {
    border-radius: 32rpx !important;
    margin: 0 !important;
    padding: 0 34rpx !important;
    background-color: $all-color !important;
    color: #3d3d3d !important;
    font-weight: 600 !important;
  }
  ::v-deep .y-tab__text {
    font-size: 28rpx;
  }
  ::v-deep .y-tabs__bar {
    display: none !important;
    // width: 50% !important;
    // height: 100% !important;
    // transform: translate3d(0,0,0) !important;
    // border-radius: 32rpx !important;
    // bottom: 0 !important;
    // background-color: #7863ff !important;
  }
</style>
